<template>
  <vxe-layout-container vertical>
    <vxe-layout-header class="layout-header">
      <Query :queryConfig="QueryConfig" @QueryEvent="handleQuery"></Query>
    </vxe-layout-header>
    <vxe-layout-body class="layout-body">
      <vxe-grid ref="maingrid" v-bind="GridOptions" @cell-dblclick="handleCellDbClick">
        <template #operation="{ row }">
          <vxe-button :size="componentSize" mode="text" status="primary" content="证书" @click="handlCerti(row)" />
          <vxe-button :size="componentSize" mode="text" status="success" content="完结" @click="handleDone(row)"
            v-if="btnPromission.done.buttonCaption" />
        </template>
        <template #proStatus="{ row }">
          <vxe-tag v-if="row.xmzt == 'N'" status='error' content="未完结"></vxe-tag>
          <vxe-tag v-else status='success' content="已完结"></vxe-tag>
        </template>
      </vxe-grid>
      <vxe-pager :align="PagerConfig.align" :size="componentSize" :current-page.sync="PagerConfig.currentPage"
        :page-size.sync="PagerConfig.pageSize" :total="PagerConfig.total" @page-change="handlePageChange"></vxe-pager>
      <Step v-if="ViewModel" :stepConfig="StepConfig" @SaveEvent="handleStepEvent"
        @EndProcessEvent="handleEndProcessEvent">
      </Step>
    </vxe-layout-body>

    <!--项目完成确认窗口-->
    <vxe-modal v-model="DoneModal" title="数据编辑" :width="680" :height="450">
      <vxe-form ref="DoneModal" v-bind="DoneModalFormOptions" @submit="handleDoneModalSubmit"
        @reset="handleDoneModalReset">
        <template #action>
          <vxe-button type="submit" status="primary">提交</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
          <vxe-button @click="handleImport">导入</vxe-button>
        </template>
      </vxe-form>
    </vxe-modal>
    <vxe-modal v-model="DoneModal3" title="证书登记" :width="680" :height="400" show-footer >
      <vxe-tabs type="border-card" :height="280" v-model="ActiveTab">
        <vxe-tab-pane v-for="item in GltxList" :title="item.txmc" :name="item.txid" :key="item.txid">
          <vxe-form v-bind="item.formData" title-width="100">
            <vxe-form-item title="证书日期" field="zsrq" span="12">
              <vxe-date-picker v-model="item.formData.zsrq" :size="componentSize" placeholder="请选择证书开始日期"
                type="date">
              </vxe-date-picker>
            </vxe-form-item>
            <vxe-form-item title="证书有效期" field="zsyxq" span="12">
              <vxe-date-picker v-model="item.formData.zsyxq" :size="componentSize" placeholder="请选择证书开始日期"
                type="date">
              </vxe-date-picker>
            </vxe-form-item>
            <vxe-form-item title="证书机构" field="zsjg" span="12">
              <vxe-input v-model="item.formData.zsjg" :size="componentSize" placeholder="请输入证书机构">
              </vxe-input>
            </vxe-form-item>
            <vxe-form-item title="证书号" field="zsh" span="24">
              <vxe-textarea  v-model="item.formData.zsh" :size="componentSize"
                placeholder="请输入证书号,多张证书用逗号(英文)隔开,第一张为主证书">
              </vxe-textarea>
            </vxe-form-item>
          </vxe-form>
        </vxe-tab-pane>
      </vxe-tabs>
      <template #footer>
        <vxe-button type="submit" status="primary">提交</vxe-button>
        <vxe-button @click="handleImport2">导入</vxe-button>
      </template>
    </vxe-modal>

    <vxe-modal v-model="DoneModal2" title="证书登记" :width="900" :height="400" show-footer >
      <vxe-grid ref="DoneModalGrid" v-bind="DoneModalGridOptions"></vxe-grid>
      <template #footer>
        <vxe-button type="submit" status="primary" @click="handleCertificateSubmit">提交</vxe-button>
        <vxe-button @click="handleImport2">导入</vxe-button>
      </template>
    </vxe-modal>
  </vxe-layout-container>

</template>
<style></style>
<script>
import ProjectExecution from './index.js';
export default ProjectExecution;
</script>
